<template>
	<view class="page">
		<view class="">
			<view class="title" style="display: flex;align-items: center;">
				<u-icon name="arrow-left" style="color: #fff;flex: 4;margin-left: 0.3rem;" @click="goBack"></u-icon>
				<text style="color: #fff;font-size: 16px;flex: 4;text-align: center;padding-left: 1.7rem;">团队激活设备</text>
				<view @click="selectTimeM" style="padding: 0rem 0.5rem;display: flex;flex: 4;justify-content: flex-end;
				align-items: center;">
					<u-icon name="calendar" style="width: 0.8rem;
					color: #fff;
				height: 0.8rem;
				padding: 0.3rem;" src="../../style/image/stati/A33.png"
					 alt=""></u-icon>
					<view style="
				font-size: 0.65rem;
				font-family: PingFang SC;
				font-weight: 300;color: #fff;margin-left: 0.5rem;
				">{{selectTime}}</view>
				</view>
			</view>
		</view>
		<view class="bgc">
			<view class="" style="margin-bottom: 1.2rem;font-size: 64rpx;">
				{{allNewAgentNumSum}}
			</view>
			<text>累计激活代理数<text> </text>(人)</text>
		</view>

		<view class="end-title">
			<view @tap="change(0)" :class="{btna:btnnum == 0}" @click="all">全部</view>
			　　<view @tap="change(1)" :class="{btna:btnnum == 1}">规则一</view>
			　<!-- <view @tap="change(2)" :class="{btna:btnnum == 2}">规则二</view>
			　　<view @tap="change(3)" :class="{btna:btnnum == 3}">规则三</view>
			<view @tap="change(4)" :class="{btna:btnnum == 4}">规则四</view> -->
		</view>
		<view class="end-cont" :class="{dis:btnnum == 0}">
			　　<view class="end-cont-item" v-for="item in allList" :key="item.id">
				<view class="item-left">
					<image :src="item.headImg"></image>
					<text style="margin: 0 0.6rem;">{{item.nickName}}</text>
					<text class="level">{{item.name}}</text>
				</view>
				<view class="item-right">
					激活<text style="padding: 0 0.3rem;color: #02AF74;">{{item.terminalActivateNum}}</text>台
				</view>
			</view>
		</view>
		<view class="end-cont" :class="{dis:btnnum == 1}">
			　　<view class="end-cont-item" v-for="item in userList" :key="item.id">
				<view class="item-left">
					<image :src="item.headImg"></image>
					<text style="margin: 0 0.6rem;">{{item.nickName}}</text>
					<text class="level">{{item.name}}</text>
				</view>
				<view class="item-right">
					激活<text style="padding: 0 0.3rem;color: #02AF74;">{{item.terminalActivateNum}}</text>台
				</view>
			</view>
		</view>
		<!-- <view class="end-cont" :class="{dis:btnnum == 2}">
			　　<u-empty mode="data"></u-empty>
		</view>
		<view class="end-cont" :class="{dis:btnnum == 3}">
			　 　　<u-empty mode="data"></u-empty>
		</view>
		<view class="end-cont" :class="{dis:btnnum == 4}">
			　 　　<u-empty mode="data"></u-empty>
		</view> -->
		<u-popup v-model="popupShow" mode="bottom">
			<view>
				<view style="text-align: center;margin: 1rem 0rem 0rem 0rem;">请选择筛选类型:</view>
				<view class="classesifyP">
					<view class="classesify">
						<view :class="selectIfy==1?'classesify-puc':'classesify-pucs' " @click="pucM">按月</view>
						<!-- <view class="classesify-pucs" @click="pucM" v-else>代理12</view> -->
						<view class="classesify-buss" @click="busM" v-if="selectIfy == 2">按日</view>
						<view class="classesify-bus" @click="busM" v-else>按日</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-picker v-model="pickerShow" @confirm="pickerConfirm" mode="time"></u-picker>
		<u-select v-model="selectShow" :default-value=[10,10] mode="mutil-column" :list="list" @confirm="selectConfirm"></u-select>
	</view>
	</view>
</template>

<script lang="js">
	import {
		agentStatisticsTerminal,
		findProfitRuleList
	} from '../../utils/uniApi'
	export default {
		mounted() {
			this.allAgentStatisticsTerminal()
		},
		data() {
			return {
				background: {
					backgroundColor: '#02AF74'
				},
				selectTime: "请选择日期",
				btnnum: 0,
				popupShow: false,
				pickerShow: false,
				selectShow: false,
				selectIfy: 0,
				dateType: '', //month 按月查询,day 按天查询
				dateTime: '', // 日期
				userList: [],
				allList:[],
				newAgentNumSum: '',
				allNewAgentNumSum:'',
				list: [
					[{
							value: '1',
							label: '2010'
						},
						{
							value: '2',
							label: '2011'
						},
						{
							value: '3',
							label: '2012'
						},
						{
							value: '4',
							label: '2013'
						},
						{
							value: '5',
							label: '2014'
						},
						{
							value: '6',
							label: '2015'
						},
						{
							value: '7',
							label: '2016'
						},
						{
							value: '8',
							label: '2017'
						},
						{
							value: '9',
							label: '2018'
						},
						{
							value: '10',
							label: '2019'
						},
						{
							value: '11',
							label: '2020'
						},
						{
							value: '12',
							label: '2021'
						},
					],
					[{
							value: '13',
							label: '1'
						},
						{
							value: '14',
							label: '2'
						},
						{
							value: '15',
							label: '3'
						},
						{
							value: '16',
							label: '4'
						},
						{
							value: '17',
							label: '5'
						},
						{
							value: '18',
							label: '6'
						},
						{
							value: '19',
							label: '7'
						},
						{
							value: '20',
							label: '8'
						},
						{
							value: '21',
							label: '9'
						},
						{
							value: '22',
							label: '10'
						},
						{
							value: '23',
							label: '11'
						},
						{
							value: '24',
							label: '12'
						},
					],
				],
				ruleId: ''
			}
		},
		methods: {
			//查询规则id
			findProfitRuleList() {
				let params = {
					userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId"))
				}
				findProfitRuleList(params).then(res => {
					res.data.data.forEach((vaule, index) => {
						this.ruleId = res.data.data[index].id
						this.getAgentStatisticsTerminal()
						// console.log(vaule, '++++规则id')
					})
				})

			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			change(e) {
				this.btnnum = e
				console.log(this.btnnum)
				if(e==1){
					this.findProfitRuleList()
				}
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			//全部激活设备统计
			allAgentStatisticsTerminal() {
				console.log(this.ruleId, '++++规则id')
				let params = {
					userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
					dateType: this.dateType, //month 按月查询,day 按天查询
					queryDate: this.dateTime, //	时间
				}
				agentStatisticsTerminal(params).then(res => {
					console.log(res, '全部激活设备统计')
				
					this.allList = res.data.data.userList
					this.allNewAgentNumSum = res.data.data.terminalActivateNumSum
					console.log(this.allList, '+++userlist数组')
				})
			},
			//激活设备统计
			getAgentStatisticsTerminal() {
				console.log(this.ruleId, '++++规则id')
				let params = {
					userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
					ruleId: this.ruleId,
					dateType: this.dateType, //month 按月查询,day 按天查询
					queryDate: this.dateTime, //	时间
				}
				agentStatisticsTerminal(params).then(res => {
					console.log(res, '激活设备统计')
				
					this.userList = res.data.data.userList
					this.newAgentNumSum = res.data.data.newAgentNumSum
					console.log(this.newAgentNumSum, '+++userlist数组')
				})
			},
			selectTimeM(index) {
				this.popupShow = !this.show
			},
			busM() {
				//方法中获取this
				this.selectIfy = 2;

				this.popupShow = false
				this.pickerShow = true

				setTimeout(() => {

					this.selectIfy = 0;
				}, 1000)
				// this.findProfitRuleList()
			},
			pucM() {
				console.log(12312312);
				this.selectIfy = 1;

				this.popupShow = false
				this.selectShow = true

				setTimeout(() => {

					this.selectIfy = 0;
				}, 1000)

				// this.findProfitRuleList()
			},
			pickerConfirm(data) {
				console.log('按日起', data)
				this.selectTime = data.year + '-' + data.month + '-' + data.day

				this.dateType = 'day'
				this.dateTime = data.year + '-' + data.month + '-' + data.day
				this.findProfitRuleList()
				this.allAgentStatisticsTerminal()
			},

			selectConfirm(data) {
				console.log(data)

				let str = data[0].label + '-' + data[1].label

				this.selectTime = str
				console.log(str)

				this.dateType = 'month'
				this.dateTime = str
				this.findProfitRuleList()
				this.allAgentStatisticsTerminal()
			}

		},

	}
</script>

<style lang="scss" scoped>
	uni-page-body {
		height: 100%;
	}

	.page {
		height: 100%;
		background-color: #f3f5f7;
	}

	/* 将四个内容view的display设置为none(隐藏) */
	.end-title {
		display: flex;
		margin-bottom: 5px;
		background-color: #fff;
		// border-bottom: 5px solid #f3f5f7;
	}

	.end-title view {
		flex-grow: 1;
		text-align: center;
		padding: 0.3rem 0;
		margin: 0rem 0.3rem;
	}

	.end-cont {
		display: none;


		.end-cont-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			margin-bottom: 0.3rem;
			padding: 0.5rem 0.8rem;

			image {
				width: 75rpx;
				height: 75rpx;
				border-radius: 50%;
			}

			.level {
				color: #fff;
				background-color: #02AF74;
				padding: 0 0.4rem;
				border-radius: 30rpx;
			}

			.item-left {
				display: flex;
				align-items: center;
			}
		}

	}

	.btna {
		color: #03ae74;
		border-bottom: 6rpx solid #03ae74;
		padding: 0.3rem 0;
		margin: 0rem 0.3rem;
	}

	.dis {
		display: block;
	}

	.uni-page-body {
		height: 100%;
		background-color: #faf7f8;
	}

	.title {
		background-color: #02AF74;
		height: 44px;
		font-size: 18px;
		// padding: 0.2rem 0.3rem;
		// display: flex;
		// align-items: center;
		// justify-content: space-around;
	}

	.bgc {
		background-color: #02AF74;
		height: 266rpx;
		text-align: center;
		color: #FFFFFF;
		padding: 1rem 0rem 2rem 1.3rem;

		.new {
			border-radius: 30rpx;
			background-color: #07ad65;
			margin: 0.9rem 0;
			padding: 0.15rem 0.1rem;
		}
	}

	.classesifyP {
		text-align: center;
		display: flex;
		justify-content: center;

		padding: 1rem 1rem 3rem 1rem;
	}

	.classesify {
		width: 6rem;
		height: 1.8rem;
		border: 1px solid #02af74;

		display: flex;
		align-items: center;
		border-radius: 10px;
		/* //   background-color: red; */
	}

	.classesify-puc {
		width: 50%;
		font-size: 0.6rem;
		border-bottom-left-radius: 8px;
		border-top-left-radius: 8px;
		height: 100%;
		line-height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #02af74;
	}

	.classesify-pucs {
		width: 50%;
		font-size: 0.6rem;
		border-bottom-left-radius: 8px;
		border-top-left-radius: 8px;
		height: 100%;
		line-height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: white;
	}

	.classesify-bus {
		width: 50%;
		font-size: 0.6rem;
	}

	.classesify-buss {
		width: 50%;
		font-size: 0.6rem;
		border-bottom-right-radius: 8px;
		border-top-right-radius: 8px;
		height: 100%;
		line-height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #02af74;
	}
</style>
